<template>
  <div class="iot-Home">
    <el-container>
      <el-header style="height: 50px; background-color: #299cf0">
        <el-row :gutter="10">
          <el-col :lg="iconShow ? 3 : 4" :md="iconShow ? 2 : 4" :sm="iconShow ? 2 : 4" :xl="iconShow ? 3 : 4"
                  :xs="iconShow ? 2 : 4">
            <div class="grid-content yg-log" style="height: 50px">
              <img v-if="iconShow" alt="" src="@/assets/img/log/log.jpg"/>
              <span v-else>后台管理</span>
              <div class="show-icon" @click="iconShow = !iconShow;">
                <el-icon v-if="!iconShow">
                  <Expand/>
                </el-icon>
                <el-icon v-else>
                  <Fold/>
                </el-icon>
              </div>
            </div>
          </el-col>
          <el-col :lg="iconShow ? 9 : 8" :md="iconShow ? 7 : 5" :sm="iconShow ? 8 : 6" :xl="iconShow ? 9 : 8"
                  :xs="iconShow ? 10 : 8">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :lg="6" :md="9" :sm="8" :xl="6" :xs="4">
<!--            <div class="grid-content bg-purple">XXX公司，欢迎您</div>-->
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xl="6" :xs="8">
            <div class="grid-content bg-purple-light">
              <el-row>
                <el-col :span="16">
                  <div class="grid-content bg-purple" style="display:flex;align-items: center">
                    <el-popconfirm title="确定重启后台服务吗？" @confirm="resetJava()">
                      <template #reference>
                        <el-icon class="icon-style">
                          <el-tooltip content="重启后台" placement="top">
                            <Coin/>
                          </el-tooltip>
                        </el-icon>
                      </template>
                    </el-popconfirm>
                    <el-tooltip content="后台日志" placement="top">
                      <el-icon class="icon-style" @click="loginfo">
                        <Tickets/>
                      </el-icon>
                    </el-tooltip>
                    <el-tooltip content="刷新页面" placement="top">
                      <el-icon class="icon-style" @click="refresh">
                        <Refresh/>
                      </el-icon>
                    </el-tooltip>
                    <el-badge :hidden="TableList.length < 1" :max="99" :value="TableList.length">
                      <i class="iconfont icon-tixing icon-item" @click="drawer = true"></i>
                    </el-badge>
                  </div>
                  <el-drawer v-model="drawer" :with-header="false" size="70%" title="我是标题" @close="TableList = []">
                    <yg-table :columns="columns" :height="'900'" :tableList="TableList"></yg-table>
                  </el-drawer>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple" style="display: flex; min-width: 108px">
                    <h3 style="margin: 0; font-size: 14px">{{ userName }}</h3>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-dropdown style="text-align: center; display: block" @command="handleCommand">
                      <el-icon :size="25" class="icon-style2">
                        <UserFilled/>
                      </el-icon>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container style="height: calc(100vh - 50px)">
        <el-aside :width="iconShow ? '70px' : '150px'" style="background: #324157">
          <el-menu :collapse="iconShow" :collapse-transition="false" :default-active="activePath"
                   background-color="#324157" router
                   text-color="#a7b1c2" unique-opened>
            <el-menu-item v-for="(item, index) in filteredMenuList" :key="index" :index="'/' + item.path"
                          @click="savePath('/' + item.path)">
              <component :is="item.iconV3" style="width: 1.3em;margin-right: 0.5em"/>
              <template #title>
                <span>{{ item.name }}</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container id="el-box">
          <yg-breadcrumb></yg-breadcrumb>
          <el-main class="el-top" style="padding: 0 5px">
            <router-view></router-view>
          </el-main>
          <div id="resize" title="收缩侧边栏"></div>
          <el-footer id="el-bottom">
            <div class="operation">
              <el-icon color="red" @click="LogList = []">
                <Delete/>
              </el-icon>
            </div>
            <div class="item-list">
              <div style=" font-size: 12px; color: black; display: flex; font-weight: 600;">
                <div>时间</div>
                <div style="margin-left: 170px">日志内容</div>
              </div>
              <div v-for="(item, index) in LogList" :key="index" style="font-size: 12px; color: #299cf0; display: flex">
                <div>{{ item.time }}</div>
                <div style="color: black; margin-left: 20px">{{ item.msg }}</div>
              </div>
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {iotList, localStorageList, SCADA_MSG} from "@/utils/Menu/menu";
import {myStorage} from "@/utils/localStorage/index";
import YgBreadcrumb from "@/components/Breadcrumb/YgBreadcrumb.vue";
import {setMessageCallback, removeMessageCallback, publishMsg, checkSpecialId,} from "@/mqtt/index";
import {onMounted, reactive, toRefs, onBeforeUnmount,computed} from 'vue';
import {useRouter} from "vue-router";
import {ElMessage} from 'element-plus'
import YgTable from "@/components/Table/YgTable.vue";

export default {
  name: "iotHome",
  components: {
    YgBreadcrumb,
    YgTable,
  },
  setup() {
    const router = useRouter();
    // const store = useStore()
    // 使用 reactive 定义复杂数据
    const data = reactive({
      iconShow: false,
      isBottomShow: false,
      offsetWidth: "", //浏览器宽度
      role:myStorage.get(localStorageList.role)*1,
      MenuList: iotList,
      activePath: myStorage.get('activePath'), // 保存菜单激活状态
      userName: myStorage.get(localStorageList.nickName),
      drawer: false, //抽屉
      TableList: [],
      columns: [
        {
          prop: "update_time",
          label: "告警时间",
          align: "left",
          width: 200,
        },
        {
          prop: "id",
          label: "数据id",
        },
        {
          prop: "name",
          label: "数据名称",
          width: 80,
        },
        {
          prop: "desc",
          label: "数据描述",
          width: 80,
        },
        {
          prop: "alarm_type",
          label: "告警类型",
          formatter(row) {
            if (row.hasOwnProperty("alarm_type")) {
              if (row.alarm_type == "1") {
                return "遥信变位";
              }
              if (row.alarm_type == "2") {
                return "遥测越限";
              }
              if (row.alarm_type == "3") {
                return "网关事件";
              }
              if (row.alarm_type == "4") {
                return "终端事件";
              }
              if (row.alarm_type == "5") {
                return "遥控事件";
              }
              if (row.alarm_type == "6") {
                return "遥调事件";
              }
            } else {
              return "";
            }
          },
        },
        {
          prop: "alarm_desc",
          label: "告警描述",
          width: 250,
        },
        {
          prop: "value",
          label: "告警值",
          width: 70,
        },
        {
          prop: "unit",
          label: "告警单位",
          width: 80,
        },
      ],
      boxHeight: 0,
      LogList: [],
    });
    function onMessage(topic, msg) {
      switch (msg.webMsgType) {
        case 8003:
          switch (msg.funCode) {
            case 0:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  return ElMessage.error(msg.retMsg);
                } else {
                  router.push("/Login");
                  ElMessage.success("您已退出登录！");
                }
              }
              break;
            default:
              break;
          }
          break;
        case 1000:
          switch (msg.funCode) {
            case 2:
              if (msg.data) {
                if (data.LogList.length > 99) {
                  data.LogList.pop();
                }
                data.LogList.unshift(msg.data);
              }
              break;
            default:
              break;
          }
          break;
        default:
          break;
      }
    }

    function loginfo() {
      const newUrl = router.resolve({name: "LogView"});
      window.open(newUrl.href, "_blank");
    }

    function resetJava() {
      let resetMsg = {webMsgType: 1000, funCode: 5,};
      publishMsg(resetMsg);
    }

    function handleCommand() {
      let sendMsg = {webMsgType: SCADA_MSG.scada_logout, funCode: 0,};
      router.push("/Login")
      localStorage.clear()
      publishMsg(sendMsg);
    }
    //保存菜单路径
    function savePath(activePath) {
      myStorage.set("activePath", activePath);
    }
    //待改
    function dragSlidBar(delay) {
      const dragBtn = document.getElementById("resize");
      const slideBarBox = document.getElementById("el-bottom");
      let slideBarWidth = 60;
      //鼠标按下
      dragBtn.onmousedown = function (e) {
        //记录鼠标开始位置
        let startY = e.clientY;
        //防抖初始时间
        let init_time = 0;
        //给得是document绑定事件
        document.onmousemove = function (e) {
          // 防抖
          let now_time = new Date(); //现在时间
          if (now_time - init_time > delay) {
            //满足时间则执行
            init_time = now_time;
            //记录鼠标位置
            let endY = e.clientY;
            //计算鼠标移动距离
            // debugger
            let moveY = endY - startY;
            // 更新鼠标初始位置
            startY = endY;
            // 更新盒子宽度
            slideBarWidth += -moveY;
            // 边界值处理
            if (slideBarWidth < 50) {
              slideBarWidth = 50;
            }
            if (slideBarWidth > 400) {
              slideBarWidth = 400;
            }
            slideBarBox.style.height = slideBarWidth + "px";
          }
          return false; //阻止默认事件
        };
        //解除事件
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
          // 释放鼠标
          dragBtn.releaseCapture && dragBtn.releaseCapture();
        };
        // 捕获鼠标
        dragBtn.setCapture && dragBtn.setCapture();
        return false; //阻止默认事件
      };
    }

    onMounted(() => {
      setMessageCallback(onMessage);
      //监听浏览器宽度
      //待改
      data.offsetWidth = document.body.offsetWidth;
      window.onresize = () => {
        return (() => {
          data.offsetWidth = document.body.offsetWidth;
        })();
      };
      dragSlidBar(20);
    });

    onBeforeUnmount(() => {
      removeMessageCallback(onMessage);
    });

    const filteredMenuList = computed(() => {
      return data.MenuList.filter(item => item.role <= data.role);
    });

    const refresh=()=>{
      location.reload()
    }
    return {
      refresh,
      ...toRefs(data),
      onMessage,
      loginfo,
      resetJava,
      handleCommand,
      savePath,
      filteredMenuList
    };
  },
}
</script>
<style lang="scss" scoped>
.iot-Home {
  height: 100%;
  width: 100%;
  background: rgb(235, 232, 232);
  background-size: 100% 100%;
  background-attachment: fixed;
  margin: 0 auto;
}

.el-header {
  .yg-log {
    margin-left: 10px;
    line-height: 50px;
    display: flex;

    img {
      width: 40px;
      height: 40px;
      margin-top: 5px;
      border-radius: 30%;
    }

    span {
      font-size: 18px;
      font-weight: 600;
      color: #fff;
    }

    .show-icon {
      display: inline-block;
      width: 50px;
      font-size: 30px;
      color: #fff;
      margin-left: 20px;
      line-height: 60px;
      cursor: pointer
    }
  }
}

.el-container {
  height: 100%;
  overflow: hidden;
}

.el-menu-item {
  height: 35px;
  line-height: 35px;
}

.el-menu-item:hover {
  background-color: #3e86b9 !important;
}

.el-menu li:hover {
  color: #fff !important;
}

.el-row {
  height: 50px;
}

.el-col {
  border-radius: 4px;
  line-height: 50px;
}

.icon-item {
  font-size: 22px;
  width: 20px;
  height: 20px;
  color: #d6d6d6;
  margin: 0px 15px;
  cursor: pointer;
}

.icon-item:hover {
  color: rgb(78, 81, 83);
}

.bg-purple {
  img {
    width: 40px;
    height: 40px;
    border-radius: 30%;
  }
}

.bg-purple-light {
  .show-icon {
    width: 50px;
    font-size: 30px;
    color: #fff;
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 50px;
}

::v-deep .el-badge__content {
  height: 13px;
  line-height: 13px;
  padding: 0 2px;
}

::v-deep .el-badge__content.is-fixed {
  top: 10px;
  right: 20px;
}

/*拖拽区div样式*/
#resize {
  cursor: n-resize;
  background-color: #d6d6d6;
  border-radius: 5px;
  width: 100%;
  height: 4px;
  background-size: cover;
  background-position: center;
  font-size: 18px;
  color: white;
}

/*拖拽区鼠标悬停样式*/
#resize:hover {
  background-color: #828080;
}

.el-footer {
  padding: 0;
  background-color: #fff;
}

.operation {
  width: 100%;
  height: 20px;
  line-height: 20px;
  display: flex;
  flex-direction: row-reverse;
  padding: 10px 15px 0 0;
  cursor: pointer;
}

.item-list {
  height: calc(100% - 20px);
  overflow: auto;
  white-space: nowrap;
  padding: 0 15px;
}

.footer-hide {
  height: 60px !important;
}

.footer-show {
  height: 200px !important;
}

.icon-style {
  font-size: 22px;
  color: #d6d6d6;
  margin: 0 15px;
  cursor: pointer;
}

.el-col[data-v-74e9a30d] {
  padding-left: 0 !important;
}

.icon-style2 {
  margin-top: 10px;
  cursor: pointer;
}
</style>
